/**
 * @description 图片合成器
 */
Rsd.define('Rsd.tool.ImageFirer', {
    extend: 'Rsd.container.Dialog',
    requires: [
        'Rsd.control.List',
        'Rsd.control.Svg',
        'Rsd.form.Slider',
        'Rsd.form.Input',
        'Rsd.form.Image',
        'Rsd.form.Button',
        'Rsd.form.Number',
        'Rsd.form.TextFK',
        'Rsd.control.Canvas'
    ],
    xtype: 'image-firer',
    border: false,
    height: 800,
    width: "80%", 
    layout: 'hbox', 
    style:{
        backgroundColor:'#fffefee6'
    },
    /**
     * 
     */
    setBackgroundColorHandler:null,
    setBackgroundImageHandler:null,
    setZoomHandler:null,
    /**
     * 
     */
    addMaterialHandler:null,
    /**
     * 
     */
    configChangedHandler:null,
    /**
     * 
     */
    header:{
        xtype:'container',
        header:null,
        //space:10,
        height:50,
        lineHeight:50,
        layout:{type:'hbox',align:'right'},
        style:{
            display:'flex',
            backgroundColor:'#ffffff'
        },
        items:[
            {
                flex:1
            },
            
            {
                flex:1
            },
            {
                xtype:'text',
                label:{content:'文件名',width:90},
                width:300,
            },
            {
                xtype:'button',
                text:'保 存',
                height:40,
                width:120,
            },
            {
                xtype:'button',
                text:'下 载',
                height:40,
                width:120,
                handler:'btn_download'
            }
        ]
    },
    /**
     * 
     */
    items: [
        {
            xtype:'list',
            label:'素 材 库',
            floating:true,
            height:'94%',
            width:80,
            layout:'vbox',
            style:{
                backgroundColor:'#0908080d'
            }, 
            itemStyle:{
                height:90
            },
            itemClick:'albums_click', 
        },
        {
            xtype:'list',
            label:{
                visible:false,
                position:'right',
                space:0,
                width:10,
                style:{
                    backgroundColor:'grey'
                }
            },
            floating:true,
            layout:'vbox',
            width:250,
            height:'90%',
            style:{
                //top:'3%',
                left:90,
                backgroundColor:'#ffffff',
                border:'grey solid 1px',
                borderRadius:'5px',
            },
            itemDblClick:'material_item_dbl_click'
        }, 
        {
            xtype:'canvas',
            label:{space:0},
            floating:true,
            height:'92%',
            width:'calc((100% - 650px))', 
            ctrlCls:'container_bg',
            style:{
                overflow:'auto',
                //top:'3%',
                right:280,
                boxShadow:'0px 0px 5px 5px #1d151578'
            },
        },
        {
            xtype:'container',
            width:250,
            height:'90%',
            floating:true,
            header:{
                visible:false,
                position:'left',
                space:0,
                width:10,
                style:{
                    backgroundColor:'grey'
                }
            }, 
            style:{
                //top:'3%',
                right:5,
                backgroundColor:'#ffffff',
                border:'grey solid 1px',
                borderRadius:'5px',
            },
            layout:'vbox',
            items:[
                {
                    xtype:'number',
                    label:{content:'宽 度(px)',width:60},
                    height:50,
                    width:240,
                    onchange:function(sender,evt){
                        //console.log(this.parent.parent,sender.getValue(),evt);
                        this.funApplyByIOC(this.parent.parent.setWidthHandler,[sender.getValue()]);
                    }
                },
                {
                    xtype:'number',
                    label:{content:'高 度(px)',width:60},
                    height:50,
                    width:240,
                    onchange:function(sender,evt){
                        //console.log(this.parent.parent,sender.getValue(),evt);
                        this.funApplyByIOC(this.parent.parent.setHeightHandler,[sender.getValue()]);
                    }
                },
                {
                    xtype: 'slider',
                    label:{content:'缩 放(%)',width:60},
                    width:240,
                    height:100,
                    value:60,
                    min:-500,
                    max:500,
                    onchange:function(sender,evt){
                         
                        this.funApplyByIOC(this.parent.parent.setZoomHandler,[sender.getValue()/100]);
                    }
                },
                {
                    xtype:'image',
                    label:{content:'背景图',align:'left',position:'top'},
                    toolbar:false,
                    border:true,
                    width:230,
                    height:230,
                    margin:'0 0 0 10'

                },
                {
                    xtype:'text',
                    label:{content:'背 景 色',width:60},
                    height:50,
                    width:240,
                    onchange:function(sender,evt){
                        //console.log(this.parent.parent,sender.getValue(),evt);
                        this.funApplyByIOC(this.parent.parent.setBackgroundColorHandler,[sender.getValue()+'px']);
                    }
                },
                {
                    xtype: 'slider',
                    label:{content:'旋 转(度)',width:60},
                    width:240,
                    height:100,
                    value:60,
                    min:-180,
                    max:180,
                    onchange:function(sender,evt){
                        //console.log(this.parent.parent,sender.getValue(),evt);
                        this.funApplyByIOC(this.parent.parent.setZoomHandler,[sender.getValue()/100]);
                    }
                },
                {
                    xtype: 'slider',
                    label:{content:'透 明 度',width:60},
                    width:240,
                    height:70,
                    value:60,
                    onchange:function(sender,evt){
                        //console.log(this.parent.parent,sender.getValue(),evt);
                        this.funApplyByIOC(this.parent.parent.setZoomHandler,[sender.getValue()/100]);
                    }
                },
                {
                    xtype: 'slider',
                    label:{content:'饱 和 度',width:60},
                    width:240,
                    height:70,
                    value:0,
                    min:-100,
                    max:100,
                    onchange:function(sender,evt){
                        //console.log(this.parent.parent,sender.getValue(),evt);
                        this.funApplyByIOC(this.parent.parent.setZoomHandler,[sender.getValue()/100]);
                    }
                }
            ]
        },
        {
            xtype:'list',
            label:null,
            width:80,
            height:150,
            floating:true,
            visible:false,
            style:{
                //element:'ctrl',
                zIndex:9999,
                overflow:'auto', 
                border:'grey solid 1px',
                backgroundColor:'#ffffff',
                boxShadow:'0px 0px 5px 5px #1d151578'
            },
            layout:'vbox',
            dataSource:[
                {
                    xtype:'svg',
                    label:"置于顶层",
                    width:'100%'
                },
                {
                    xtype:'svg',
                    label:"置于底层",
                    width:'100%'
                },
                {
                    xtype:'svg',
                    label:"删 除",
                    width:'100%'
                } 

            ],
            listeners:{
                'contextmenu':{
                    element:'dom',
                    fn:function (sender,evt) {
                            evt.preventDefault();
                        }
                    }
                }
        }
    ],
    /**
     * 
     */
    configSchema:{
        canvas:{
            'backgroundColor':'string',
            'width':'number',
            'height':'number',
            'scaleX':'number',
            'scaleY':'number',
            'angle':'number',
        },
        image:
        {
            'backgroundImage':'string',
            'backgroundColor':'string',
            'width':'number',
            'height':'number',
            'scaleX':'number',
            'scaleY':'number',
            
        }
    },
    /**
     * 
     * @param {*} config 
     */
    constructor: function ImageFirer(config) {
        config = config || {};
        this.apply(config);
    },
    /**
     * 
     */
    load:function load()
    {
        
        this.callParent();
        this.loadAlbums();
       
    },
    /**
     * @description 相册列表
     */
    loadAlbums:function loadAlbums(data)
    {
        var _data = data||[
            {
                xtype: 'svg',
                key:'123456',
                label:{
                    height:25,
                    content:'场景图',
                    space:0,
                    position:'bottom', 
                },
                width:'100%',
                height:80,
                dataSource:{
                    "viewBox": "0 0 1024 1024",
                    "paths": [
                        "M487 413.9v-96.1c0-37.4-30.4-67.9-67.9-67.9H299c-37.4 0-67.9 30.4-67.9 67.9v96.1c0 5.1 1.7 10 4.9 13.9l24.2 29.8-25.1 35.3c-2.6 3.7-4.1 8.2-4.1 12.7v212.5c0 37.4 30.4 67.9 67.9 67.9 12.2 0 22-9.8 22-22s-9.8-22-22-22c-13.2 0-23.9-10.7-23.9-23.9V540.4H453.3c12.9 0 23.8-8.3 27.7-19.8 7-7.5 8-19.1 1.8-27.7l-25.1-35.3 24.2-29.8c3.3-4 5.1-8.9 5.1-13.9z m-188-120h120.1c13.2 0 23.9 10.7 23.9 23.9v47.1H275.1v-47.1c0-13.2 10.8-23.9 23.9-23.9zM443 406l-29.8 36.7c-6.2 7.7-6.6 18.6-0.9 26.6l8.9 12.5H297l8.9-12.5c5.7-8.1 5.4-19-0.9-26.6L275.1 406v-15.7H443V406zM680 669.3c-27.8 28.6-73.9 29.4-102.5 1.6-28.6-27.8-29.4-73.9-1.6-102.5 0 0 351.8-308.9 380.5-281.1C985 315 680 669.3 680 669.3zM447.5 672.3c15.6-12 64.7-19.9 92.4 6.4 24.5 23.3 28.5 50.6 23.8 81.3-12.2 79.7-88.7 80.7-138.5 77.2-29.3-2.1-99.8-8.1-99.8-8.1 22.1-14.2 33.3-17 68.9-76 12.5-20.8 20.4-55.5 53.2-80.8z",
                        "M765.2 915H170.7c-57.9 0-104.9-47.1-104.9-104.9V215.5c0-57.9 47.1-104.9 104.9-104.9h594.5c57.9 0 104.9 47.1 104.9 104.9v26.4c0 12.2-9.8 22-22 22s-22-9.8-22-22v-26.4c0-33.6-27.3-60.9-60.9-60.9H170.7c-33.6 0-60.9 27.3-60.9 60.9V810c0 33.6 27.3 60.9 60.9 60.9h594.5c33.6 0 60.9-27.3 60.9-60.9V642.9c0-12.2 9.8-22 22-22s22 9.8 22 22v167.2c0.1 57.8-47 104.9-104.9 104.9z"
                    ]
                }
            },
            {
                xtype: 'svg',
                key:'123456',
                label:{
                    height:25,
                    content:'图形库',
                    space:0,
                    position:'bottom' 
                },
                width:'100%',
                height:80,
                dataSource:{
                    "viewBox": "0 0 1024 1024",
                    "paths": [
                        "M487 413.9v-96.1c0-37.4-30.4-67.9-67.9-67.9H299c-37.4 0-67.9 30.4-67.9 67.9v96.1c0 5.1 1.7 10 4.9 13.9l24.2 29.8-25.1 35.3c-2.6 3.7-4.1 8.2-4.1 12.7v212.5c0 37.4 30.4 67.9 67.9 67.9 12.2 0 22-9.8 22-22s-9.8-22-22-22c-13.2 0-23.9-10.7-23.9-23.9V540.4H453.3c12.9 0 23.8-8.3 27.7-19.8 7-7.5 8-19.1 1.8-27.7l-25.1-35.3 24.2-29.8c3.3-4 5.1-8.9 5.1-13.9z m-188-120h120.1c13.2 0 23.9 10.7 23.9 23.9v47.1H275.1v-47.1c0-13.2 10.8-23.9 23.9-23.9zM443 406l-29.8 36.7c-6.2 7.7-6.6 18.6-0.9 26.6l8.9 12.5H297l8.9-12.5c5.7-8.1 5.4-19-0.9-26.6L275.1 406v-15.7H443V406zM680 669.3c-27.8 28.6-73.9 29.4-102.5 1.6-28.6-27.8-29.4-73.9-1.6-102.5 0 0 351.8-308.9 380.5-281.1C985 315 680 669.3 680 669.3zM447.5 672.3c15.6-12 64.7-19.9 92.4 6.4 24.5 23.3 28.5 50.6 23.8 81.3-12.2 79.7-88.7 80.7-138.5 77.2-29.3-2.1-99.8-8.1-99.8-8.1 22.1-14.2 33.3-17 68.9-76 12.5-20.8 20.4-55.5 53.2-80.8z",
                        "M765.2 915H170.7c-57.9 0-104.9-47.1-104.9-104.9V215.5c0-57.9 47.1-104.9 104.9-104.9h594.5c57.9 0 104.9 47.1 104.9 104.9v26.4c0 12.2-9.8 22-22 22s-22-9.8-22-22v-26.4c0-33.6-27.3-60.9-60.9-60.9H170.7c-33.6 0-60.9 27.3-60.9 60.9V810c0 33.6 27.3 60.9 60.9 60.9h594.5c33.6 0 60.9-27.3 60.9-60.9V642.9c0-12.2 9.8-22 22-22s22 9.8 22 22v167.2c0.1 57.8-47 104.9-104.9 104.9z"
                    ]
                }
            },
            {
                xtype: 'svg',
                key:'123456',
                label:{
                    height:25,
                    content:'SVG库',
                    space:0,
                    position:'bottom'
                },
                width:'100%',
                height:80,
                dataSource:{
                    "viewBox": "0 0 1024 1024",
                    "paths": [
                        "M487 413.9v-96.1c0-37.4-30.4-67.9-67.9-67.9H299c-37.4 0-67.9 30.4-67.9 67.9v96.1c0 5.1 1.7 10 4.9 13.9l24.2 29.8-25.1 35.3c-2.6 3.7-4.1 8.2-4.1 12.7v212.5c0 37.4 30.4 67.9 67.9 67.9 12.2 0 22-9.8 22-22s-9.8-22-22-22c-13.2 0-23.9-10.7-23.9-23.9V540.4H453.3c12.9 0 23.8-8.3 27.7-19.8 7-7.5 8-19.1 1.8-27.7l-25.1-35.3 24.2-29.8c3.3-4 5.1-8.9 5.1-13.9z m-188-120h120.1c13.2 0 23.9 10.7 23.9 23.9v47.1H275.1v-47.1c0-13.2 10.8-23.9 23.9-23.9zM443 406l-29.8 36.7c-6.2 7.7-6.6 18.6-0.9 26.6l8.9 12.5H297l8.9-12.5c5.7-8.1 5.4-19-0.9-26.6L275.1 406v-15.7H443V406zM680 669.3c-27.8 28.6-73.9 29.4-102.5 1.6-28.6-27.8-29.4-73.9-1.6-102.5 0 0 351.8-308.9 380.5-281.1C985 315 680 669.3 680 669.3zM447.5 672.3c15.6-12 64.7-19.9 92.4 6.4 24.5 23.3 28.5 50.6 23.8 81.3-12.2 79.7-88.7 80.7-138.5 77.2-29.3-2.1-99.8-8.1-99.8-8.1 22.1-14.2 33.3-17 68.9-76 12.5-20.8 20.4-55.5 53.2-80.8z",
                        "M765.2 915H170.7c-57.9 0-104.9-47.1-104.9-104.9V215.5c0-57.9 47.1-104.9 104.9-104.9h594.5c57.9 0 104.9 47.1 104.9 104.9v26.4c0 12.2-9.8 22-22 22s-22-9.8-22-22v-26.4c0-33.6-27.3-60.9-60.9-60.9H170.7c-33.6 0-60.9 27.3-60.9 60.9V810c0 33.6 27.3 60.9 60.9 60.9h594.5c33.6 0 60.9-27.3 60.9-60.9V642.9c0-12.2 9.8-22 22-22s22 9.8 22 22v167.2c0.1 57.8-47 104.9-104.9 104.9z"
                    ]
                }
            },
            {
                xtype: 'svg',
                key:'123456',
                label:{
                    height:25,
                    content:'商品图',
                    space:0,
                    position:'bottom'
                },
                width:'100%',
                height:80,
                dataSource:{
                    "viewBox": "0 0 1024 1024",
                    "paths": [
                        "M487 413.9v-96.1c0-37.4-30.4-67.9-67.9-67.9H299c-37.4 0-67.9 30.4-67.9 67.9v96.1c0 5.1 1.7 10 4.9 13.9l24.2 29.8-25.1 35.3c-2.6 3.7-4.1 8.2-4.1 12.7v212.5c0 37.4 30.4 67.9 67.9 67.9 12.2 0 22-9.8 22-22s-9.8-22-22-22c-13.2 0-23.9-10.7-23.9-23.9V540.4H453.3c12.9 0 23.8-8.3 27.7-19.8 7-7.5 8-19.1 1.8-27.7l-25.1-35.3 24.2-29.8c3.3-4 5.1-8.9 5.1-13.9z m-188-120h120.1c13.2 0 23.9 10.7 23.9 23.9v47.1H275.1v-47.1c0-13.2 10.8-23.9 23.9-23.9zM443 406l-29.8 36.7c-6.2 7.7-6.6 18.6-0.9 26.6l8.9 12.5H297l8.9-12.5c5.7-8.1 5.4-19-0.9-26.6L275.1 406v-15.7H443V406zM680 669.3c-27.8 28.6-73.9 29.4-102.5 1.6-28.6-27.8-29.4-73.9-1.6-102.5 0 0 351.8-308.9 380.5-281.1C985 315 680 669.3 680 669.3zM447.5 672.3c15.6-12 64.7-19.9 92.4 6.4 24.5 23.3 28.5 50.6 23.8 81.3-12.2 79.7-88.7 80.7-138.5 77.2-29.3-2.1-99.8-8.1-99.8-8.1 22.1-14.2 33.3-17 68.9-76 12.5-20.8 20.4-55.5 53.2-80.8z",
                        "M765.2 915H170.7c-57.9 0-104.9-47.1-104.9-104.9V215.5c0-57.9 47.1-104.9 104.9-104.9h594.5c57.9 0 104.9 47.1 104.9 104.9v26.4c0 12.2-9.8 22-22 22s-22-9.8-22-22v-26.4c0-33.6-27.3-60.9-60.9-60.9H170.7c-33.6 0-60.9 27.3-60.9 60.9V810c0 33.6 27.3 60.9 60.9 60.9h594.5c33.6 0 60.9-27.3 60.9-60.9V642.9c0-12.2 9.8-22 22-22s22 9.8 22 22v167.2c0.1 57.8-47 104.9-104.9 104.9z"
                    ]
                }
            },
            {
                xtype: 'svg',
                key:'123456',
                label:{
                    height:25,
                    content:'更 多',
                    space:0,
                    position:'bottom'
                },
                width:'100%',
                height:80,
                dataSource:{
                    "viewBox": "0 0 1024 1024",
                    "paths": [
                        "M487 413.9v-96.1c0-37.4-30.4-67.9-67.9-67.9H299c-37.4 0-67.9 30.4-67.9 67.9v96.1c0 5.1 1.7 10 4.9 13.9l24.2 29.8-25.1 35.3c-2.6 3.7-4.1 8.2-4.1 12.7v212.5c0 37.4 30.4 67.9 67.9 67.9 12.2 0 22-9.8 22-22s-9.8-22-22-22c-13.2 0-23.9-10.7-23.9-23.9V540.4H453.3c12.9 0 23.8-8.3 27.7-19.8 7-7.5 8-19.1 1.8-27.7l-25.1-35.3 24.2-29.8c3.3-4 5.1-8.9 5.1-13.9z m-188-120h120.1c13.2 0 23.9 10.7 23.9 23.9v47.1H275.1v-47.1c0-13.2 10.8-23.9 23.9-23.9zM443 406l-29.8 36.7c-6.2 7.7-6.6 18.6-0.9 26.6l8.9 12.5H297l8.9-12.5c5.7-8.1 5.4-19-0.9-26.6L275.1 406v-15.7H443V406zM680 669.3c-27.8 28.6-73.9 29.4-102.5 1.6-28.6-27.8-29.4-73.9-1.6-102.5 0 0 351.8-308.9 380.5-281.1C985 315 680 669.3 680 669.3zM447.5 672.3c15.6-12 64.7-19.9 92.4 6.4 24.5 23.3 28.5 50.6 23.8 81.3-12.2 79.7-88.7 80.7-138.5 77.2-29.3-2.1-99.8-8.1-99.8-8.1 22.1-14.2 33.3-17 68.9-76 12.5-20.8 20.4-55.5 53.2-80.8z",
                        "M765.2 915H170.7c-57.9 0-104.9-47.1-104.9-104.9V215.5c0-57.9 47.1-104.9 104.9-104.9h594.5c57.9 0 104.9 47.1 104.9 104.9v26.4c0 12.2-9.8 22-22 22s-22-9.8-22-22v-26.4c0-33.6-27.3-60.9-60.9-60.9H170.7c-33.6 0-60.9 27.3-60.9 60.9V810c0 33.6 27.3 60.9 60.9 60.9h594.5c33.6 0 60.9-27.3 60.9-60.9V642.9c0-12.2 9.8-22 22-22s22 9.8 22 22v167.2c0.1 57.8-47 104.9-104.9 104.9z"
                    ]
                }
            }
            //
        ];
        this.items[0].loadData(_data);
    },
    /**
     * @description 加载相册内图片
     * @param {*} data 
     */
    loadAlbumsImage:function loadAlbumsImage(data)
    { 
        //console.log(data);
        this.items[1].loadData(data)
    },
    /**
     * @description 展示元素配置项
     * @param {*} item 
     */
    loadConfig:function loadConfig(item)
    {
        //
        if(item==null)
        {
            return;
        }
        //console.log(item); 
        if(item.type == 'image')
        {
            item.angle = 0;
            //item.height = 100;
            item.scale(0.3);
        }
        this.funApplyByIOC(this.configChangedHandler,[item]);
    },
    /**
     * 
     */
    showMenu:function showMenu(x,y)
    {
        var menu = this.items[4];
        menu.setPosition(x,y);
        menu.visible =true;
        menu.loadData();
    },
    /**
     * 
     */
    hideMenu:function hideMenu()
    {
        var menu = this.items[4];
        menu.removeAll();
        menu.visible = false;
    },
    
    /**
     * 
     * @param {*} sender 
     * @param {*} evt 
     */
    albums_click:function albums_click(sender,evt)
    {
        //console.log(sender);
        //获取相册图片数据

        var data = [
            {
            xtype:'image',
            toolbar:false,
            width:'100%',
            height:200,
            showLoadingBar:false,
            label:{
                content:'20230508132346.jpg',
                position:'bottom'
            },
            src:'https://rsdgoodsimg.oss-cn-shanghai.aliyuncs.com/origin/20230508132346.png'
        },{
            xtype:'image',
            toolbar:false,
            width:'100%',
            height:200,
            showLoadingBar:false,
            label:{
                content:'20230508132336.jpg',
                position:'bottom'
            },
            src:'https://rsdgoodsimg.oss-cn-shanghai.aliyuncs.com/origin/20230508132336.png'
        }
    ];
    
    this.loadAlbumsImage(data);
       
    },
    /**
     * 
     */
    material_item_dbl_click:function material_item_dbl_click(sender,evt)
    {
        this.funApplyByIOC(this.addMaterialHandler,[sender,evt]);
    },
    btn_set_zoom:function btn_set_zoom()
    {
        this.funApplyByIOC(this.setZoomHandler,[0.5]);
    },
    btn_download:function btn_download()
    {
        this.funApplyByIOC(this.downloadHandler,[0.5]);
    }

});